<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="../../vueCore/vue.min.2.7.14.js"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
		<!-- 引入样式 -->
		<link
			rel="stylesheet"
			href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
		/>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<link rel="stylesheet" href="./css/index.css" />
		<title>首页</title>
	</head>

	<body>
		<div class="about" id="root">
			<div class="container">
				<el-menu
					:default-active="navActive"
					text-color="#000"
					active-text-color="#409EFF"
					class="el-menu-demo"
					mode="horizontal"
				>
					<el-menu-item
						v-for="(item, index) in nav"
						:key="index"
						:index="index + ''"
						class="meun-item"
						@click="toPage(item)"
					>
						{{item.label}}
					</el-menu-item>
					<!-- <el-alert class="head-text-suc" :closable="false" :title="headText" type="success">
        </el-alert>
        <el-alert class="head-text-suc" :closable="false" title="不渝盟誓 ，情约今生" type="error">
        </el-alert>
        <span class="time">{{time}}</span> -->
				</el-menu>

				<div class="swiper-container">
					<el-carousel :interval="4000" type="card" height="500px">
						<el-carousel-item v-for="item in swiper" :key="item.id">
							<img :src="item.src" alt="" />
						</el-carousel-item>
					</el-carousel>
				</div>

				<div class="content">
					<div class="content-item flex">
						<div class="content-item-left-img">
							<img
								src="https://static.darryring.com/vidoe/drElove/U23060820111_fb13747d9fe34d1b9d5b2a47ef6e5421"
								alt=""
							/>
						</div>
						<div class="content-item-right-img">
							<img
								src="https://static.darryring.com/vidoe/drElove/U23060820116_36869a89588e40449f38d1bd8b81a42e"
								alt=""
							/>
						</div>
					</div>
				</div>

				<div class="content">
					<div class="content-item flex">
						<div class="content-item-left-img">
							<img
								src="https://static.darryring.com/vidoe/drElove/U23060820119_3a20edcc14f14b0883c2a2dcfc5094b0"
								alt=""
							/>
						</div>
						<div class="content-item-right-img">
							<img
								src="	https://static.darryring.com/vidoe/drElove/U23060820125_13ce5ec7affe49d5b0e4e516aa8b8439"
								alt=""
							/>
						</div>
					</div>
				</div>

				<div class="content">
					<div class="content-item flex">
						<div class="content-item-left">
							<img src="./images/y-1.jpg" alt="" />
						</div>
						<div class="content-item-right">
							<div
								class="right-item"
								v-for="item in 8"
								:key="item"
							>
								<img
									src="./images/h-1.jpg"
									alt=""
									@click="toPage(item)"
								/>
							</div>
						</div>
					</div>
				</div>

				<div class="content">
					<div class="content-item flex">
						<div class="content-item-left">
							<img src="./images/y-2.jpg" alt="" />
						</div>
						<div class="content-item-right">
							<div
								class="right-item"
								v-for="item in 8"
								:key="item"
							>
								<img
									src="./images/h-3.jpg"
									alt=""
									@click="toPage(item)"
								/>
							</div>
						</div>
					</div>
				</div>

				<div class="content">
					<div class="content-item flex">
						<div class="content-item-left">
							<img src="./images/y-3.jpg" alt="" />
						</div>
						<div class="content-item-right">
							<div
								class="right-item"
								v-for="item in 8"
								:key="item"
							>
								<img
									src="./images/h-2.jpg"
									alt=""
									@click="toPage(item)"
								/>
							</div>
						</div>
					</div>
				</div>

				<div class="footer">
					<!-- <el-divider content-position="left">
          快看！好多星星✨
        </el-divider> -->
					<!-- <div class="footer-item">
          <el-tag v-for="(item,index) in footer" :type="item.t" :key="index"
            style="margin-right: 10px;cursor: pointer;">
            {{item.x}}
          </el-tag>
          <el-badge :value="99" class="badge-item">
            <el-button size="small" style="width: 100%;">科技改变生活</el-button>
          </el-badge>
        </div> -->
					<div class="bottom-text">
						<p>商务合作|联系我们|加入我们</p>
						<p>Wedding Ring Network</p>
						<!-- <P>关注我们可以获得更多旅游小Tips</P> -->
						<!-- <p><a href="https://www.baidu.com/">更多旅游景区点击这里</a></p> -->
					</div>
				</div>
			</div>

			<!-- <div id="particle_container">
      <div class="particle_item1"></div>
      <div class="particle_item2"></div>
      <div class="particle_item3"></div>
    </div> -->
		</div>

		<script>
			const vm = new Vue({
				el: '#root',
				data: {
					textList: ['永远对美好的事情抱有期待'],
					nav: [
						{ label: '首页' },
						{ label: '详情' },
						{ label: '品牌故事' }
					],
					footer: [
						{ x: '首页', t: 'success' },
						{ x: '联系我们', t: 'error' },
						{ x: '关于我们', t: 'warning' },
						{ x: '技术支持', t: 'info' },
						{ x: '赞助👍', t: '' }
					],
					navActive: '0',
					headText: '如果你还没下定决心，请不要送她「守护一生」',
					swiper: [
						{ id: 1, src: './images/s-1.jpeg' },
						{ id: 2, src: './images/s-2.jpg' },
						{ id: 3, src: './images/s-3.jpg' }
					],
					time: ''
				},
				created() {
					this.popupNotify('欢迎来到我的空间站');
					setInterval(() => {
						this.time = new Date().toLocaleString();
					}, 1000);
				},
				methods: {
					popupNotify(message = '消息', title = '信息提示') {
						this.$notify({
							title,
							message
						});
					},
					toPage(item) {
						if (item.label === '详情') {
							window.location.href = './about.html';
						} else if (item.label === '关于') {
							window.location.href = './prefecture.html';
						} else {
							window.location.href = './about.html';
						}
					}
				}
			});
		</script>
	</body>
</html>
